<template>
  <div class="line">
    <image class="ball" :style="{'left': left1+'%'}"/>
    <image class="ball" :style="{'left': left2+'%'}"/>
  </div>
</template>
<script setup>
import {ref, onMounted, onBeforeUnmount } from 'vue';
const left1 = ref(30);
const left2 = ref(70);
let timer;
onMounted(()=>{
 timer = setInterval(() => {
    if(left1.value == 100){
      left1.value = 0;
    }else{
      left1.value ++;
    }
    if(left2.value == 100){
      left2.value = 0;
    }else{
      left2.value ++;
    }
  }, 10);
})
onBeforeUnmount(()=>{
 if(timer !== undefined) clearInterval(timer)
})
</script>
<style scoped>
.line {
  width: 114px;
  height: 3px;
  background-color: rgba(16, 165, 227, 0.3);
  position: absolute;
}
.ball,
.ball {
  width: 15px;
  height: 15px;
  position: absolute;
  top: -6px;
  background-image: url(../../assets/images/guide/light.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
</style>